<div class="modal" ng-controller="RenderFormController">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="pull-right">
          <button type="button" class="close" ng-click="$hide()">&times;</button>
        </div>
        <h3 class="modal-title">{{ getDefaultModelTitle() }}</h3>
      </div>
      <div class="modal-body">
        <table class="agree-table" ng-if="approvalResult === 'agree'">
          <tr>
            <td>{{ 'PROCESS.SECTION.SECTION' | translate }}</td>
            <td>
              <textarea rows="5" ng-model="message.value"></textarea>
            </td>
          </tr>
          <tr>
            <td>{{ 'PROCESS.SECTION.OFTENUSED' | translate }}&nbsp;</td>
            <td>
              <span ng-click="setMessage($event)" class="btn btn-default blue-color"
                >{{ 'PROCESS.COMMENTS.AGREE' | translate }}</span
              >
              <span ng-click="setMessage($event)" class="btn btn-default blue-color"
                >{{ 'PROCESS.COMMENTS.URGENT' | translate }}</span
              >
            </td>
          </tr>
        </table>

        <table class="agree-table" ng-if="approvalResult === 'hangUp'">
          <tr>
            <td>{{ 'PROCESS.SECTION.SECTION' | translate }}</td>
            <td>
              <textarea rows="5" ng-model="message.value"></textarea>
            </td>
          </tr>
          <tr>
            <td>{{ 'PROCESS.SECTION.OFTENUSED' | translate }}&nbsp;</td>
            <td>
              <span ng-click="setMessage($event)" class="btn btn-default blue-color"
                >{{ 'PROCESS.COMMENTS.HANG-UP' | translate }}</span
              >
              <span ng-click="setMessage($event)" class="btn btn-default blue-color"
                >{{ 'PROCESS.COMMENTS.HANG-UP-COMMENTS' | translate }}</span
              >
            </td>
          </tr>
        </table>

        <table class="agree-table" ng-if="approvalResult === 'activation'">
          <tr>
            <td>{{ 'PROCESS.SECTION.SECTION' | translate }}</td>
            <td>
              <textarea rows="5" ng-model="message.value"></textarea>
            </td>
          </tr>
          <tr>
            <td>{{ 'PROCESS.SECTION.OFTENUSED' | translate }}&nbsp;</td>
            <td>
              <span ng-click="setMessage($event)" class="btn btn-default blue-color"
                >{{ 'PROCESS.COMMENTS.ACTIVATION' | translate }}</span
              >
              <span ng-click="setMessage($event)" class="btn btn-default blue-color"
                >{{ 'PROCESS.COMMENTS.ACTIVATION-COMMENTS' | translate }}</span
              >
            </td>
          </tr>
        </table>

        <table class="agree-table" ng-if="approvalResult === 'stop'">
          <tr>
            <td>{{ 'PROCESS.SECTION.SECTION' | translate }}</td>
            <td>
              <textarea rows="5" ng-model="message.value"></textarea>
            </td>
          </tr>
          <tr>
            <td>{{ 'PROCESS.SECTION.OFTENUSED' | translate }}&nbsp;</td>
            <td>
              <span ng-click="setMessage($event)" class="btn btn-default blue-color"
                >{{ 'PROCESS.COMMENTS.STOP' | translate }}</span
              >
              <span ng-click="setMessage($event)" class="btn btn-default blue-color"
                >{{ 'PROCESS.COMMENTS.STOP-COMMENTS' | translate }}</span
              >
            </td>
          </tr>
        </table>

        <table class="agree-table" ng-if="approvalResult === 'reject'">
          <tr>
            <td>{{ 'FORM.DEFAULT-OUTCOME.REJECT-NODE' | translate }}</td>
            <td>
              <div class="dropdown">
                <p
                  class="btn btn-default dropdown-toggle"
                  type="button"
                  id="dropdownMenu1"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="true"
                  ng-click="getTaskNode()"
                >
                  {{ taskDef }}
                  <span class="caret"></span>
                </p>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li ng-click="setTaskNode(item)" ng-repeat="item in taskNodes">
                    <a>{{ item.taskNodeName }}</a>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td>{{ 'PROCESS.SECTION.SECTION' | translate }}</td>
            <td>
              <textarea rows="5" ng-model="message.value"></textarea>
            </td>
          </tr>
          <tr>
            <td>{{ 'PROCESS.SECTION.OFTENUSED' | translate }}&nbsp;</td>
            <td>
              <span ng-click="setMessage($event)" class="btn btn-default blue-color"
                >{{ 'PROCESS.COMMENTS.REJECT' | translate }}</span
              >
              <span ng-click="setMessage($event)" class="btn btn-default blue-color"
                >{{ 'PROCESS.COMMENTS.REJECT-COMMENTS' | translate }}</span
              >
            </td>
          </tr>
        </table>

        <table class="agree-table" ng-if="approvalResult === 'transfer'">
          <tr>
            <td>{{ 'FORM.DEFAULT-OUTCOME.TRANSFERER' | translate }}</td>
            <td>
              <div>
                <input
                  class="form-control"
                  type="text"
                  id="people-select-input"
                  placeholder="{{ 'INVOLVE-PEOPLE.SEARCH-PLACEHOLDER' | translate }}"
                  auto-focus
                  custom-keys
                  up-pressed="previousUser()"
                  down-pressed="nextUser()"
                  enter-pressed="confirmUser()"
                  delayed-model="popup.filter"
                  delay="200"
                />
                <ul class="transfer-target">
                  <li
                    ng-click="setTaskNode(item)"
                    ng-repeat="item in transferNodes"
                    ng-if="popup.filter != item.userName"
                  >
                    <a>{{ item.userName }}</a>
                  </li>
                  <li ng-if="transferNodes.length==0">
                    {{ 'TASK.MESSAGE.NO-USER' | translate }}
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td>{{ 'PROCESS.SECTION.SECTION' | translate }}</td>
            <td>
              <textarea rows="5" ng-model="message.value"></textarea>
            </td>
          </tr>
          <tr>
            <td>{{ 'PROCESS.SECTION.OFTENUSED' | translate }}&nbsp;</td>
            <td>
              <span ng-click="setMessage($event)" class="btn btn-default blue-color"
                >{{ 'PROCESS.COMMENTS.TRANSFER' | translate }}</span
              >
              <span ng-click="setMessage($event)" class="btn btn-default blue-color"
                >{{ 'PROCESS.COMMENTS.TRANSFER-COMMENTS' | translate }}</span
              >
            </td>
          </tr>
        </table>

        <table class="agree-table" ng-if="approvalResult === 'addExecution'">
          <tr>
            <td>{{ 'FORM.DEFAULT-OUTCOME.EXECUTER' | translate }}</td>
            <td>
              <div>
                <input
                  class="form-control"
                  type="text"
                  id="people-select-input"
                  placeholder="{{ 'INVOLVE-PEOPLE.SEARCH-PLACEHOLDER' | translate }}"
                  auto-focus
                  custom-keys
                  up-pressed="previousUser()"
                  down-pressed="nextUser()"
                  enter-pressed="confirmUser()"
                  delayed-model="popup.filter"
                  delay="200"
                />
                <ul class="transfer-target">
                  <li
                    ng-click="setTaskNode(item)"
                    ng-repeat="item in transferNodes"
                    ng-if="popup.filter != item.userName"
                  >
                    <a>{{ item.userName }}</a>
                  </li>
                  <li ng-if="transferNodes.length==0">
                    {{ 'TASK.MESSAGE.NO-USER' | translate }}
                  </li>
                </ul>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="modal-footer">
        <div class="pull-right">
          <button type="button" class="btn btn-sm" ng-click="completeForm('complete')">
            {{ 'GENERAL.ACTION.CONFIRM' | translate }}
          </button>
          <span type="button" class="btn btn-sm btn-default" ng-click="$hide()">
            {{ 'GENERAL.ACTION.CANCEL' | translate }}
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
